import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Carousel, List, Grid, Icon, Provider, Toast, Modal, Radio} from '@ant-design/react-native';
import {outlineGlyphMap} from '@ant-design/icons-react-native/lib/outline';
import {getPackageEdit} from '~/api/order';
import {getParkingDataInfo, getParkingOrderInfo} from '~/api/parking';
import {getBankLoanInfo, getApplyInfo, getApplyInfoByOrderId} from '~/api/bank';
const RadioItem = Radio.RadioItem;

class SaleOrderInfo extends Component {
    static navigationOptions = {
        title: '销售订单详情',
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            parkorderid: this.props.navigation.getParam('parkorderid'),
            orderInfo: [],
            parklist: [],
            packagelist: [],
            banklist: [],
            appliID: 0,
            applylist: [],
            ParkingDataID: '',
            loantype: 0, //0为未选择金融产品  1已有金融产品
            moneytype: 0, //0未上传支付凭证  1已上传支付凭证
        };
        getParkingOrderInfo(this.state.parkorderid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    orderInfo: r.data,
                    appliID: r.data.BankApplyID,
                    ParkingDataID: r.data.ParkingDataID,
                });
                //获取车位信息
                this.getparkinfo(r.data.ParkingDataID);
                //获取套餐信息
                this.getpackage(r.data.ParkingPackageID);
                // if (r.data.PayMode == 2) {
                //     //获取单个贷款申请记录
                //     this.getappinfo(r.data.BankApplyID);
                // }
            } else {
                Alert.alert(r.msg);
            }
        });

        getApplyInfoByOrderId(this.state.parkorderid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    loantype: r.data == '' ? 0 : 1,
                });
            } else {
                console.log(r.msg);
            }
        });
    }

    getparkinfo(id) {
        getParkingDataInfo(id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parklist: r.data,
                });
            } else {
                console.log(r.msg);
            }
        });
    }
    getpackage(id) {
        getPackageEdit({
            order_id: id,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    packagelist: r.data.order,
                });
            } else {
                console.log(r.msg);
            }
        });
    }

    getappinfo(id) {
        getApplyInfo(id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    applylist: r.data,
                });
                //获取金融产品
                this.getbank(r.data.BankLoanID);
            } else {
                console.log(r.msg + 11);
            }
        });
    }
    getbank(loanid) {
        getBankLoanInfo(loanid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    banklist: r.data,
                });
            } else {
                console.log(r.msg);
            }
        });
    }

    render() {
        return (
            <>
                <View style={{width: '100%', height: '100%'}}>
                    <ScrollView style={{flex: 1}}>
                        <Flex direction="column" align="start" style={{backgroundColor: '#FFFFFF'}}>
                            <Image style={{width: '100%', height: 250}} source={require('~/assets/parkinfo/chewei2x.png')} />
                            <Flex style={{backgroundColor: '#FFFFFF', paddingLeft: 21, paddingRight: 10, width: '100%'}}>
                                <Text numberOfLines={1} style={{fontSize: 18, marginTop: 24.5, width: '40%'}}>
                                    {this.state.parklist.BuildingName}
                                </Text>
                                <Text numberOfLines={1} style={{fontSize: 16, marginTop: 24.5, width: '25%', color: '#666666'}}>
                                    {this.state.parklist.ParkingName}
                                </Text>
                                <Text numberOfLines={1} style={{fontSize: 16, marginTop: 24.5, width: '20%', color: '#666666'}}>
                                    {this.state.parklist.AreaName}
                                </Text>
                                <Text
                                    numberOfLines={1}
                                    style={{
                                        fontSize: 16,
                                        marginTop: 24.5,
                                        width: '15%',
                                        color: 'white',
                                        backgroundColor: '#EC4F46',
                                        textAlign: 'center',
                                        borderRadius: 5,
                                    }}>
                                    {this.state.parklist.state}
                                </Text>
                            </Flex>
                            <Flex direction={'row'} style={{marginTop: 22, marginLeft: 21}}>
                                <Text style={{color: '#999999', fontSize: 13}}>车位价格</Text>
                                <Text
                                    style={{
                                        color: '#EC4F46',
                                        marginLeft: 5,
                                        fontSize: 20,
                                    }}>
                                    {this.state.parklist.PriceSell}元
                                </Text>
                            </Flex>
                            <View style={styles.textfenge} />
                            <Flex style={{marginTop: 21, marginLeft: 20}}>
                                <Text>
                                    地址：{this.state.parklist.CityName}
                                    {this.state.parklist.Address}
                                </Text>
                                <Image
                                    style={{
                                        width: 10,
                                        height: 11,
                                    }}
                                    source={require('~/assets/shouye/dizhi_12x.png')}
                                />
                            </Flex>
                            <View style={styles.textfenges} />
                            <Text
                                style={{
                                    marginTop: 20,
                                    marginLeft: 21,
                                    fontSize: 16,
                                }}>
                                车位概况
                            </Text>
                            <Flex direction={'row'} style={{marginLeft: 20.5, marginTop: 20}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>车位长：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parklist.AreaLength}米</Text>
                                <Text
                                    style={{
                                        fontSize: 14,
                                        color: '#999999',
                                        marginLeft: 105,
                                    }}>
                                    车位宽：
                                </Text>
                                <Text style={{fontSize: 14}}>{this.state.parklist.AreaWidth}米</Text>
                            </Flex>
                            <Flex direction={'row'} style={{marginLeft: 20.5, marginTop: 14.5}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>建筑面积：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parklist.AreaBuilt}㎡</Text>
                            </Flex>
                            <Flex direction={'row'} style={{marginLeft: 20.5, marginTop: 14.5}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>使用面积：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parklist.AreaInner}㎡</Text>
                            </Flex>
                            <View style={styles.textfenges} />
                            <Flex
                                direction={'row'}
                                justify={'between'}
                                align={'center'}
                                style={{marginTop: 14.5, width: '100%', paddingLeft: 21, paddingRight: 21}}>
                                <Text style={{color: '#999999', fontSize: 13}}>定金</Text>
                                <Text
                                    style={{
                                        color: '#EC4F46',
                                        marginLeft: 5,
                                        fontSize: 20,
                                    }}>
                                    {this.state.orderInfo.DepositPirce}元
                                </Text>
                                <Text
                                    style={styles.button}
                                    onPress={() => {
                                        this.state.orderInfo.OrderPayID > 0 &&
                                            this.props.navigation.push('PaymentDetailed', {
                                                order_id: this.state.orderInfo.ParkingOrderID,
                                            });
                                    }}>
                                    {this.state.orderInfo.state === '未付定金' ? '未付定金' : '查看支付凭证'}
                                </Text>
                            </Flex>
                            <View style={styles.textfenges} />
                            <Flex
                                direction={'row'}
                                justify={'between'}
                                align={'center'}
                                style={{marginTop: 14.5, width: '100%', paddingLeft: 21, paddingRight: 21}}>
                                <Text style={{color: '#999999', fontSize: 13}}>支付方式</Text>
                                <Text
                                    style={{
                                        color: '#EC4F46',
                                        marginLeft: 5,
                                        fontSize: 20,
                                    }}>
                                    {this.state.orderInfo.PayMode == 1 ? '全款' : '0首付'}
                                </Text>
                                {this.state.orderInfo.state === '未付定金' ? (
                                    <Text> </Text>
                                ) : this.state.orderInfo.PayMode == 1 ? (
                                    <Text
                                        onPress={() => {
                                            this.props.navigation.push('PayMoney', {
                                                orderid: this.state.parkorderid,
                                                parkid: this.state.orderInfo.ParkingDataID,
                                            });
                                        }}
                                        style={styles.button}>
                                        {this.state.moneytype == 0 ? '未付尾款' : '查看付款凭证'}
                                    </Text>
                                ) : (
                                    <Flex>
                                        <Text
                                            onPress={() => {
                                                this.props.navigation.push('PayLoan', {
                                                    params: this.state.orderInfo.ParkingDataID,
                                                    orderid: this.state.parkorderid,
                                                });
                                            }}
                                            style={styles.button}>
                                            {this.state.loantype == 0 ? '未选择金融信息' : '查看金融信息'}
                                        </Text>
                                    </Flex>
                                )}
                            </Flex>
                            <View style={styles.textfenges} />
                        </Flex>
                        {this.state.packagelist != null && (
                            <View style={styles.maxview}>
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GiftList', {
                                            params: this.state.packagelist.OrderDataID,
                                        });
                                    }}
                                    style={{width: '100%', height: 95, padding: 10}}>
                                    <View style={{width: '20%'}}>
                                        <Image
                                            style={{
                                                width: 75,
                                                height: 75,
                                            }}
                                            source={require('~/assets/public/demo2x.png')}
                                        />
                                    </View>
                                    <Flex
                                        justify={'between'}
                                        style={{
                                            width: '60%',
                                            paddingLeft: '10%',
                                        }}>
                                        <Text
                                            numberOfLines={1}
                                            style={{
                                                fontSize: 15,
                                                fontWeight: 'bold',
                                                width: '60%',
                                                color: '#EC4F46',
                                            }}>
                                            {this.state.packagelist != null && this.state.packagelist.PackageName}
                                        </Text>
                                        <Text
                                            numberOfLines={1}
                                            style={{
                                                fontSize: 15,
                                                fontWeight: 'bold',
                                                width: '40%',
                                                color: '#EC4F46',
                                            }}>
                                            {this.state.packagelist != null && this.state.packagelist.PriceMarketTotal}元
                                        </Text>
                                    </Flex>
                                </Flex>
                                <View style={styles.textfenge} />
                            </View>
                        )}

                        <View style={styles.maxview}>
                            <Flex
                                justify={'center'}
                                onPress={() => {
                                    this.props.navigation.push('GetCarInfo');
                                }}
                                style={{width: '100%', height: 95}}>
                                <Text
                                    numberOfLines={1}
                                    style={{
                                        fontSize: 15,
                                        fontWeight: 'bold',
                                        color: '#EC4F46',
                                    }}>
                                    得汽车
                                </Text>
                            </Flex>
                            <View style={styles.textfenge} />
                        </View>
                        <View style={styles.maxview}>
                            <Flex
                                justify={'center'}
                                onPress={() => {
                                    this.props.navigation.push('GetMoneyInfo');
                                }}
                                style={{width: '100%', height: 95}}>
                                <Text
                                    numberOfLines={1}
                                    style={{
                                        fontSize: 15,
                                        fontWeight: 'bold',
                                        color: '#EC4F46',
                                    }}>
                                    拿现金
                                </Text>
                            </Flex>
                            <View style={styles.textfenge} />
                        </View>
                        <View style={styles.maxview}>
                            <Flex
                                justify={'center'}
                                onPress={() => {
                                    this.props.navigation.push('ParkPark');
                                }}
                                style={{width: '100%', height: 95}}>
                                <Text
                                    numberOfLines={1}
                                    style={{
                                        fontSize: 15,
                                        fontWeight: 'bold',
                                        color: '#EC4F46',
                                    }}>
                                    拿车位
                                </Text>
                            </Flex>
                            <View style={styles.textfenge} />
                        </View>
                        <View style={styles.textfengess} />
                    </ScrollView>
                </View>
            </>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: '#fff',
    },
    containerHorizontal: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    containerVertical: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
    images: {
        width: '100%',
        height: 150,
        marginTop: 10,
    },
    images2: {
        width: '100%',
        height: 50,
        marginTop: 10,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 2,
        marginTop: 20,
    },
    textfenges: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 10,
        marginTop: 20,
    },
    textfengess: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 35,
    },
    maxview: {
        width: '100%',
        height: 95,
        marginTop: 10,
        backgroundColor: '#FDEDEC',
        borderRadius: 10,
    },
    button: {
        fontSize: 12,
        alignSelf: 'flex-start',
        height: 25,
        borderRadius: 10,
        backgroundColor: '#FF3733',
        color: '#FFFFFF',
        textAlign: 'center',
        padding: 4,
        marginLeft: 5,
    },
});

export default SaleOrderInfo;
